<template>
  <div>
      <div class="sales panel">
          <div class="inner">
              <div class="caption">
                  <h3>销售额统计</h3>
                  <a href="javascript:;" data-type="year" :class="active == 0 ? 'active' : ''" @click="tagChange(0)">年</a>
                  <a href="javascript:;" data-type="quarter" :class="active == 1 ? 'active' : ''" @click="tagChange(1)">季</a>
                  <a href="javascript:;" data-type="month" :class="active == 2 ? 'active' : ''" @click="tagChange(2)">月</a>
                  <a href="javascript:;" data-type="week" :class="active == 3 ? 'active' : ''" @click="tagChange(3)">周</a>
              </div>
              <div class="chart">
                  <div class="label">单位:万</div>
                  <div class="line" ref="line"></div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            active:0,
            data1:[
                [
                    [24,40,101,134,90,230,210,230,120,230,210,120],
                    [40,64,191,324, 290,330,310,213,180,200,180,79],
                ],
                [
                    [23,75,12,97,21,67,98,21,43,64,79,38],
                    [43,31,65,23,78,21,82,64,100,60,19,35],
                ],
                [
                    [44,12,12,97,21,56,34,21,43,64,79,38],
                    [43,31,65,23,78,21,82,64,43,60,100,37],
                ],
                [
                    [23,88,92,97,21,27,38,21,43,54,23,38],
                    [43,45,66,23,15,21,100,64,43,77,19,36]
                ]   
            ],
            all:[24,40,101,134,90,230,210,230,120,230,210,120],
            one:[40,64,191,324, 290,330,310,213,180,200,180,79],
        }
    },
    mounted(){
        this.getLines()
        setInterval(() => {
            this.active += 1
            if(this.active > 3){
                this.active = 0
            }
            this.all = this.data1[this.active][0]
            this.one = this.data1[this.active][1]
            this.getLines()
        }, 4000)
    },
    methods:{
        tagChange(x){
            this.active = x
            this.all = this.data1[this.active][0]
            this.one = this.data1[this.active][1]
            this.getLines()
        },
        getLines(){
            let chart = this.$echarts.init(this.$refs.line)
            chart.setOption({
                // 图例
                legend:{
                    show:true,
                    right:'10%',
                    textStyle:{
                        color:'#eee'
                    }
                },
                // 网格线
                grid:{
                    top:'80%',
                    bottom:'80%',
                    borderColor:'#51b3ff',
                    show: true,
                    borderWidth:0.2,
                },
                // x轴坐标数据
                xAxis:{
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisLine:{
                        show:false
                    },
                },
                // y轴坐标数据样式
                yAxis:{
                    axisLine:{
                        show:false
                    },
                    splitLine:{
                        lineStyle:{
                            color:'#51b3ff',
                            width:0.2
                        }
                    },
                },
                tooltip:{
                    show:true,
                    trigger:'axis',
                    formatter:'{a0}: {c0}<br />{a1}: {c1}'
                },
                series:[
                    {
                        name:'总销售额',
                        type: 'line',
                        data:this.all,
                        // 线条样式
                        lineStyle:{
                            color:'#00f2f1',
                        },
                        smooth:true,  // 是否以平滑线显示

                        // 拐点标记样式
                        itemStyle:{
                            color:"#fff",
                            borderType:'dashed',
                            borderWidth:0,
                        },
                        // 标记类型
                        symbol:'diamond',
                        // 大小
                        symbolSize:5,                        
                    },
                    // 第二条线
                    {
                        name:'实际销售额',
                        type: 'line',
                        data:this.one,
                        // 线条样式
                        lineStyle:{
                            color:'#ff3d3d',
                        },
                        smooth:true,  // 平滑度
                        // 拐点标记样式
                        itemStyle:{
                            color:"#fff",
                            borderType:'dashed',
                            borderWidth:0,
                        },
                        // 标记类型
                        symbol:'diamond',
                        // 大小
                        symbolSize:5
                    }
                ]
            })
        }
    }
}
</script>

<style scoped>
    .sales{
        height: 3.6rem;
    }
    .sales .caption{
        display: flex;
        line-height:1;
    }
    .sales h3{
        height: 0.225rem;
        padding-right: 0.225rem;
        border-right: 0.025rem solid #0089f2;
        font-size: 0.33rem;
    }
    .sales a{
        padding: 0.05rem;
        font-size: 0.25rem;
        margin: -0.0375rem 0 0 0.2625rem;
        border-radius: 0.0375rem;
        color: #0bace6;
    }
    .active{
        background-color: #4c9bfd;
        color: #fff !important;
    }
    .sales .inner{
        display: flex;
        flex-direction: column;
    }
    .sales .chart{
        flex: 1;
        padding-top: 0.1875rem;
        position: relative;
    }
    .sales .label{
        position: absolute;
        left: 0.525rem;
        top:o.225rem;
        color: #4996f5;
        font-size: 0.175rem;
    }
    .sales .line{
        width: 100%;
        height: 100%;
    }
</style>